<template>
  <Page :name="name" :loading="!loading && page==1 && !config.end">
    <ScrollList ref="scroll" :config="config" @bottom="getPage" @pull="pull">
      <div class="list" v-if="list.length">
        <nuxt-link :to="{name:'good-detail',query:{id:item.goods_id}}" class="item" v-for="item in list" :key="item.goods_id">
          <div class="img">
            <img :data-src="item.thumb" v-if="item.thumb">
          </div>
          <div class="info fx fx-between">
            <div class="name flex">{{item.goods_name}}</div>
            <div class="price">{{item.price}} {{item.currency_code}}</div>
          </div>
        </nuxt-link>
      </div>
      <div v-else-if="config.end" class="empty-list">
        <ui-empty :empty='{text:"暂无数据"}'></ui-empty>
      </div>
    </ScrollList>
  </Page>
</template>

<script>
import Page from '~/components/page'
import ScrollList from '~/components/ScrollList'
import UiEmpty from  "~/components/empty";
import Lazy from "~/plugins/lazy"

/**
 * 数字千分位格式化
 * @param {Number} num
 */
function toThousands(num) {
    var chunk = num.toString().split('.');
    var num = (chunk[0] || 0).toString(), result = '';
    while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
    }
    if (num) { result = num + result; }
    if(chunk.length > 1){
        result += '.' + chunk[1]
    }
    return result;
}

export default {
  components:{
    Page,
    ScrollList,
    UiEmpty
  },
  asyncData({route}){
    const { name,cate_id }  = route.query;
    return { name, cate_id };
  },
  data(){
    return {
      page:1,
      total:1,
      list:[],
      lazy:new Lazy(),
      loading:false,
      config:{
        bottom:false,
        pull:false,
        end:false,
      }
    }
  },
  filters:{
    toFixed(value){
      if(isNaN(value)){
        return value;
      }else{
        return Number(value).toFixed(2)
      }
    },
    toThousands(value){//数字千分位处理
      return toThousands(value);
    }
  },
  // mounted(){
  //   function sleep(time=3){
  //     return new Promise((rs,rj)=>{
  //       setTimeout(rs,time*1000);
  //     })
  //   }
  //   this.$nextTick(async ()=>{
  //     this.$nuxt.$loading.start();
  //     // await sleep(3);
  //     await this.getPage();
  //     this.$nuxt.$loading.finish();
  //   })
  // },
  mounted(){
    this.$nextTick(()=>{
      this.$refs.scroll.$emit('pulling');
    })
  },
  methods:{
    async pull(cb){
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      await this.getPage(true);
      this.$nuxt.$loading.finish();
      cb();
    },
    async getPage(isRefresh){
      if(this.loading || this.config.end) return false;
      this.loading = true;
      try{
        let { data:rs } = await this.$axios.post('?ct=api&ac=goods_list',{
          page:this.page,
          category_id:this.cate_id,
        })

        if(rs.code == 0){
          const { data } = rs;
          this.total = Number(data.total);
          if(isRefresh){
            this.list = data.list;
          }else{
            this.list = this.list.concat(data.list);
          }
          if(this.total>this.list.length){
            this.page++;
            this.config.end = false;
          }else{
            this.config.end = true;
          }
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.$nextTick(()=>{
        this.lazy.update();
      })
      this.loading = false;
    }
  }
}
</script>

<style lang="less" scoped>
  .list {
    padding:20px;

    .item {
      & + .item {
        margin-top:20px;
      }
      display: block;
      border-radius: 10px;
      overflow: hidden;
      .img {
        position: relative;;
        height:212px;
        background-color:#fff;
        &:after {
          content: '';
          position: absolute;
          z-index:1;
          top:0;
          left:0;
          width:100%;
          height:100%;
          background-image: linear-gradient(to top,rgba(0,0,0,.1) 10px,rgba(0,0,0,0))
        }
        img {
          display: block;
          width:100%;
          height:100%;
        }
      }
      .info {
        padding:26px 22px;
        width:100%;
        font-size:28px;
        background-color:#fff;
        .name {
          .text-ellipsis();
          color:#292929;
        }
        .price {
          margin-left:10px;
          color:#f05521;
        }
      }
    }
  }
</style>


